<template>
	<div class="execution-action" @click.stop>
		<el-steps :active="active" finish-status="success" simple>
			<el-step 
				v-for="(step, index) in steps" 
				:key="index" 
				:title="step.title" 
				:class="isCanClick(index) ? 'canClick' : 'canNotClick'"
				@click.native="setActive(index)"
			>
				<div slot="icon" class="stepCircle">{{ index + 1 }}</div>
			</el-step>
		</el-steps>
		<sleect-application v-if="active === 0" @clickApp="setActive(1)"/>
		<select-execution-action v-else-if="active === 1" @clickApi="setActive(2)"/>
		<configuration-parameter v-else />
	</div>
</template>

<script>
import state from '@src/modules/trigger/view/setting/util/state.js'
import SleectApplication from './components/select_application';
import SelectExecutionAction from './components/select_execution_action';
import ConfigurationParameter from './components/configuration_parameter';

export default {
	name: 'ExecutionAction',
	components: {
		SleectApplication,
		SelectExecutionAction,
		ConfigurationParameter,
	},
	computed: {
		state() {
			return state;
		},
	},
	data() {
		return {
			steps: [
				{ title: "选择应用" },
				{ title: "执行动作" },
				{ title: "配置参数" }
			],
			active: 0,
		}
	},
	created() {
        if (state.currentNodeInfoFront?.options?.apiId) {
            this.active = 2;
        } else if (state.currentNodeInfoFront?.options?.appId) {
            this.active = 1;
		}
    },
	methods: {
		setActive(index) {
			if (!this.isCanClick(index)) return;
			this.active = index;
		},
		isCanClick(index) {
			const { appId = '', apiId = '' } = state.currentNodeInfoFront?.options || {};
			if (
				(index === 1 && !appId) ||
				(index === 2 && (!appId || !apiId))
			) return false;
			return true
		}
	},
}
</script>

<style scoped lang="scss">
.canClick {
	cursor: pointer;
    ::v-deep .is-wait {
        .el-step__icon {
            background-color: $color-primary;
            border-color: $color-primary;
            color: #fff;
        }

        color: #303133;
    }
}

.canNotClick {
	cursor: not-allowed;
}
.execution-action {
	height: 100%;
	::v-deep .el-steps {
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
		border-radius: 0;
		font-size: 14px;
		padding: 24px;

		.el-step {
			flex-basis: auto !important;

			&__icon {
				width: 24px;
				height: 24px;
			}

			&__arrow {
				margin: 0 20px;
			}

			&__arrow::before {
                content: "";
                display: inline-block;
                position: absolute;
                bottom: 4px;
                height: 10px;
                width: 1px;
                background: #C0C4CC;
            }

            &__arrow::after {
                content: "";
                display: inline-block;
                position: absolute;
                top: 4px;
                height: 10px;
                width: 1px;
                background: #C0C4CC;
            }

			&__title {
				font-size: 14px;
				max-width: 100%;
			}

			&__title.is-process {
				font-weight: 400;
			}

			&__head.is-process {
				.el-step__icon {
					background-color: $color-primary;
					border-color: $color-primary;
					color: #fff;
				}
			}

			&__head.is-success {
				.el-step__icon {
					background-color: $color-primary;
					border-color: $color-primary;
					color: #fff;
					font-size: 18px;
				}
			}
		}
	}
}
</style>